<template>
    <el-dialog :title="detailData.overloadPlateNo" :visible.sync="outerVisible" width="1000px">
        <div class="flex flex-direction ">
            <div v-loading="detailLoading" class="flex">

                <vehicle-media :detail-data="test" style="width: 100%;" />
            </div>


            <el-table ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="test1" size="mini"
                      header-cell-class-name="table-header" style="width: 100%; margin-top: -15px;" max-height="200">
                <el-table-column label="设备名称" width="150" prop="deviceName" />
                <el-table-column label="设备ip" width="150" prop="deviceIp" />
                <el-table-column label="本次卸货时间" width="200">
                    <template slot-scope="scope">
                        {{ moment(scope.row.gmtUnload).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
<!--                <el-table-column label="本次检测车货总重（kg）" width="100" prop="overWeight" />-->
<!--                <el-table-column label="车辆本次检测长度（CM）" width="100" prop="currentLength" />-->
<!--                <el-table-column label="车辆本次检测宽度（CM）" width="100" prop="currentWidth" />-->
<!--                <el-table-column label="车辆本次检测高度（CM）" width="100" prop="currentWeight" />-->
                <el-table-column label="操作" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看详情</el-button>
                        <!--                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.$index)">查看详情</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-dialog>
</template>

<script>
    import {GetUnloadDetailInformation} from '@/api/parkUnloadApi';
    import moment from 'moment';
    import VehicleInfo from '@/modules/components/VehicleDetail/vehicle-info';
    import VehicleMedia from '@/modules/components/VehicleDetail/vehicle-mediaunload';
    export default {
        name: 'unloadVideo',
        components: {
            VehicleInfo, VehicleMedia
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            information: Object,
            initDetailData: Object,
            initDetailData1: Object,
            // deviceType: Object,
            // 当前返回list的条数
            tableSize: Number,
            // 当前选中列在数据中的下标值
            indexs: Number,
            sign:String,
            // 当前页
            currentPage: Number,
            // 当前查询的数据的总条数(分页的总数)
            total: Number,
            isAdd: {
                type: Boolean,
                default: false
            },
            step: String
        },
        data() {
            return {
                // 处罚对象单位信息和处罚对象个人信息单选
                radio: '',
                totalCount: 0,
                unitInfoUnable: false,
                personInfoUnable: false,
                outerVisible: false,
                detailLoading: false,
                isDisabled: false,
                invalidReasonFlag: false,
                isLoading : false,
                isIllegal: '',
                tableData: [],
                localVehicleDetail: null,
                queryParams: {},
                test:{},
                test1:{},
                entranceid : '',
                // detailData:{},
            };
        },
        computed: {
            detailData() {
                return this.localVehicleDetail || this.initDetailData;
            },
            detailData1(){
                return this.initDetailData1;
            }
        },
        watch: {
            initDetailData(val) {
                this.localVehicleDetail = null;
                // this.queryParams = {
                //     Parameter: '1',
                //     CurrentPage: 1,
                //     plate_no: val.plate_no
                // };
                // this.mediaTab = 'img';
                // debugger
                this.initForm();
            }
        },
        mounted() {
            this.initForm();
        },
        methods: {
            moment,
            initForm() {
                // debugger
                // this.test = this.initDetailData;
                this.entranceid = this.initDetailData.entrance_id;
                let params = {
                    entranceId : this.entranceid
                };
                // if (this.sign === 'vehicle-illegal-confirm'){
                    GetUnloadDetailInformation(params).then(res => {
                        // debugger
                        this.test1 = res.res.GetUnloadDetailInformation;
                        if (this.test1.length > 0){
                            // this.test = this.tableData[0];
                            this.test = this.test1[0];
                            console.log("数组");
                            // console.log(this.test1[0]);
                            // console.log(this.test);
                            // this.outerVisible = true;
                        } else {
                            this.test = {};
                        }

                    }).catch(err => {
                        this.outerVisible = false;
                        console.log(err);
                    });
                // }
                // this.form = this.information;
                // this.isLoading = true;


            },
            handleTabClick() {
                this.queryParams.CurrentPage = 1;
                this.initForm();
            },
            // handleView(i){
            handleView(item){
                this.detailLoading = true;

                setTimeout(() => {
                    // this.localVehicleDetail = item;
                    this.test = item;
                    this.detailLoading = false;
                }, 100);
                // initForm();
                console.log(this.tableData);
                console.log("查看detailData1");
                console.log(this.localVehicleDetail);
            },
            show() {
                this.outerVisible = true;
            },
            showHandleResult(param) {
                if (param.target.tagName == 'SPAN') {
                    this.invalidReasonFlag = true;
                }

            },

        }
    };
</script>

<style scoped>
    >>>.el-button--mini,
    >>>.el-button--mini.is-round {
        padding: 7px 5px;
    }
    >>>.el-tabs__header {
        padding: 0;
        position: relative;
        margin: 0;
    }
    /deep/
    .el-dialog__body {
        padding: 10px 20px;
    }
    /deep/
    .el-dialog__header {
        padding: 20px 20px 10px;
        border-bottom: 1px solid #dcdfe6;
    }

</style>

